<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.infoId')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="应用信息">
              <a-select  name="infoId" v-model="model.infoId" :placeholder="$t('common.form.rule.select',{label: $t('columns.infoId')})">
                <a-select-option v-for="(item, index)  in infoOptions" :key="item.key" :value="item.value"> {{item.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.code')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
              <a-input v-model="model.code" :placeholder="$t('common.form.rule.input',{label: $t('columns.code')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.name')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" :placeholder="$t('common.form.rule.input',{label: $t('columns.name')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.appId')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="appid">
              <a-input v-model="model.appId" :placeholder="$t('common.form.rule.input',{label: $t('columns.appId')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.appSecret')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="appSecret">
              <a-input v-model="model.appSecret" :placeholder="$t('common.form.rule.input',{label: $t('columns.appSecret')})"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('columns.appType')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="appType">
              <a-select v-model="model.appType" :placeholder="$t('common.form.rule.select',{label: $t('columns.appType')})">
                <a-select-option  :value="item.value" :key="item.key" v-for="item in appTypeDict">{{item.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col v-if="model.appType === '1' || model.appType === '2'"  :span="24">
            <a-form-model-item :label="$t('columns.platformType')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="platformType">
              <a-select v-if="model.appType === '1'" v-model="model.platformType" :placeholder="$t('common.form.rule.select',{label: $t('columns.platformType')})">
                <a-select-option  :value="item.value" :key="item.key" v-for="item in appPlatformTypeDict">{{item.label}}</a-select-option>
              </a-select>
              <a-select v-if="model.appType === '2'" v-model="model.platformType" :placeholder="$t('common.form.rule.select',{label: $t('columns.platformType')})">
                <a-select-option  :value="item.value" :key="item.key" v-for="item in mpPlatformTypeDict">{{item.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<i18n>
  {
    "zh-CN": {
      "columns": {
        "infoId": "应用信息",
        "code": "包名/bundleId",
        "name": "客户端名称",
        "appId": "应用ID",
        "appSecret": "应用密钥",
        "appType": "应用类型",
        "platformType": "平台类型"
      }
    },
    "en-US": {
      "columns": {
        "infoId": "Application Information",
        "code": "Package Name/BundleId",
        "name": "Client Name",
        "appId": "Application ID",
        "appSecret": "Application Secret",
        "appType": "Application Type",
        "platformType": "Platform Type"
      }
    },
    "fr-FR": {
      "columns": {
        "infoId": "Informations sur l'application",
        "code": "Nom du paquet/bundleId",
        "name": "Nom du client",
        "appId": "Id de l'application",
        "appSecret": "Clé d'application",
        "appType": "Type d'application",
        "platformType": "Type de plateforme"
      }
    }
  }
</i18n>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  export default {
    name: 'AppClientForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/app/client/add",
          edit: "/app/client/edit",
          queryById: "/app/client/queryById",
          dict: "/app/enum-dict",
          infoOptions: "/app/info/options"
        },
        bizTypeOptions: [],
        appTypeDict:[],
        appPlatformTypeDict:[],
        infoOptions:[],
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
      //备份model原始值
      this.initDictConfig();
      this.getInfoOptions();
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      async initDictConfig(){
        this.appTypeDict = await this.getDictList("app_type_dict");
        this.appPlatformTypeDict = await this.getDictList("app_platform_type_dict");
      },
      async getDictList(dictKey){
        const res = await getAction(`/app/enum-dict/${dictKey}`);
        if(res.success){
          return res.result;
        }
        return [];
      },
      getInfoOptions(){
        httpAction(this.url.infoOptions,{},'get').then((res)=>{
          this.infoOptions=res.result;
        }).finally(() => {
        })
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>